<template>
  <div class="appwrap">
    <my-header></my-header>
    我是page下的app
    <Son></Son>
    <hr />
    <Girl>
      <div>
        <p>111</p>
        <p>222</p>
        <p>3333</p>
      </div>
    </Girl>
    <hr />
    <Dau>
        <!-- template标签不会渲染成dom节点，slot标签只会把temeplate标签的子节点渲染到对应的位置 -->
      <template v-slot:header>
        <h1>头</h1>
      </template>
      作用域插槽就是父组件插入得东西想要访问子组件里的数据
      <template  v-slot:aaa="slotProps">
            <div>  
                 <h1> {{ slotProps. user}}</h1>
                <p>我是没有名字得插槽,我有一个默认名字叫default</p>
                <p>A paragraph for the main content.</p>
                <p>And another one.</p>
             </div>
      </template>

      
     
      <template v-slot:footer="slotProps">
          <h2>{{slotProps.aaa.sex}}</h2>
        <p>footer</p>
      </template>
    </Dau>
  </div>
</template>

<script>
import Son from "./son.vue";
import Girl from "./girl.vue";
import Dau from "./dau.vue";
export default {
  components: {
    Son,
    Girl,
    Dau,
  },
};
</script>

<style>
</style>